<template>
  <!-- 北妇叫号队列 -->
  <section>
    <div>
      <deptSearch v-model="form.deptId" @success="getDept"></deptSearch>
      <el-link style="margin-left:20px;" :underline="false" title="全屏" @click="isPlus=true">
        <i class="el-icon-full-screen vertical-middle" style="font-size:18px;"></i>
        <span class="vertical-middle">全屏</span>
      </el-link>
    </div>
    <div v-if="isPlus" :class="[isPlus?'puls-screen':'']">
      <div class="full-screen-content">
        <div class="bftop-head">
          <div class="bf_bg_box">
          </div>
          <div>
            <div class="middle-title">{{form.deptId | changeDeptName(deptList)}}</div>
          </div>
          <div>
            <div class="menzhen_time">{{curDate.getTime()|hourDate}}</div>
            <div class="menzhen_date">
              <div>{{curDate|toWeek}}&nbsp;&nbsp;</div>
              <div>{{curDate|toDate}}</div>
            </div>
            <span class="vertical-middle">
              <img
                src="/img/bf_logo.png"
                style="width:250px;height:46px;margin-top:66px;float:right;"
              />
            </span>
          </div>
        </div>
        <div class="register_box">
          <table class="table-full-screen register_table" border="0">
            <thead>
              <tr>
                <th class="zs" style="width:10%">诊室</th>
                <th class="ph" style="width:20%">正在就诊</th>
                <th class="xm schedule-name_box">等候就诊</th>
                <th class="gh" style="width:35%">过号</th>
                <!-- <th>科室</th> -->
                <!-- <th>状态</th> -->
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(item,index) in tableList"
                :key="index"
                :class="[item.registerStatus==5?'register_active':'']"
                v-if="item.scheduleSourcesIng.length>0 || item.scheduleSourcesWait.length>0 || item.scheduleSourcesOverTime.length>0"
              >
                <td style="width:10%">
                  <span :class="{'active-room_name':roomName==item.roomName}">{{item.roomName}}</span>
                </td>
                <td style="width:20%">
                  <span
                    v-for="(it,index) in item.scheduleSourcesIng"
                    :key="index"
                    class="tag_patientName"
                    :class="{'active_name':paintId == it.id}"
                  >{{it.sourceCode}} {{it.patientName | changePaintName}}</span>
                  <span style="color:#ddd;" v-if="item.scheduleSourcesIng.length<1">/</span>
                </td>
                <td class="schedule-name_box">
                  <wait
                    v-if="item.scheduleSourcesWait.length>0"
                    :list="item.scheduleSourcesWait"
                    :name="paintName"
                  ></wait>
                  <span style="color:#ddd;" v-if="item.scheduleSourcesWait.length<1">/</span>
                </td>
                <td style="width:35%">
                  <over
                    v-if="item.scheduleSourcesOverTime.length>0"
                    :list="item.scheduleSourcesOverTime"
                    :name="paintName"
                    :status="numstatus"
                  ></over>
                  <span style="color:#ddd;" v-if="item.scheduleSourcesOverTime.length<1">/</span>
                  <!-- <span
                    v-for="(it,index) in item.scheduleSourcesOverTime"
                    class="gh_active_name"
                    :key="index"
                  >
                    {{it.sourceCode}} {{it.patientName | changePaintName}}
                    <label
                      v-if="index<(it.length-1)"
                    >、</label>
                  </span>-->
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="footer-box">*温馨提示:过号的患者请联系护士站</div>
    </div>
    <table v-else class="table-box" style="margin-top:20px;">
      <thead>
        <tr>
          <!-- <th class="ph">排号</th>
          <th class="xm">姓名</th>
          <th>科室</th>
          <th class="zs">诊室</th>
          <th>状态</th>-->
          <th class="ph">诊室</th>
          <th class="xm">正在检查</th>
          <th class="schedule-name_box">等候检查</th>
          <th class="zs">过号</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(item,index) in tableList"
          :key="index"
          :class="[item.registerStatus==5?'primary-color':'']"
          v-if="item.scheduleSourcesIng.length>0 || item.scheduleSourcesWait.length>0 || item.scheduleSourcesOverTime.length>0"
        >
          <td style="width:15%">{{item.roomName}}</td>
          <!-- :class="{'active_name':paintName==it.patientName}" -->
          <td style="width:20%">
            <span
              v-for="(it,index) in item.scheduleSourcesIng"
              :key="index"
            >{{it.sourceCode}} {{it.patientName | changePaintName}}</span>
          </td>
          <!-- <td>{{item.hpDepartment.deptName}}</td> -->
          <td class="schedule-name_box">
            <span
              v-for="(it,index) in item.scheduleSourcesWait"
              :key="index"
            >{{it.sourceCode}} {{it.patientName | changePaintName}}、</span>
          </td>
          <td>
            <span
              v-for="(it,index) in item.scheduleSourcesOverTime"
              :key="index"
            >{{it.sourceCode}} {{it.patientName | changePaintName}}</span>
          </td>
        </tr>
      </tbody>
    </table>
    <audio ref="audio-el" autoplay></audio>
  </section>
</template>
<script>
export default {
  filters: {
    toDate(d) {
      return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`;
    },
    changeDeptName(value, list) {
      if (value != "") {
        for (let i = 0; i < list.length; i++) {
          if (value == list[i].deptId) {
            return list[i].deptName;
          }
        }
      }
    },
  },
  data() {
    return {
      tableList: [],
      pager: { pageSize: 5, pageNum: 1, total: 0 },
      form: {
        deptId: "",
      },
      numstatus: 2,
      timer: null,
      deptList: [],
      queueArr: [],
      showItem: false,
      sourceCode: "",
      paintName: "",
      paintId: "",
      roomId: "",
      roomName: "",
      listShow: true,
      curDate: new Date(),
      isPlus: false, 
      isPlay: false,
      playCount: 2,
      curPlayCount: 0,
    };
  },
  created() {
    let th = this;
  },
  mounted() {
    let th = this;
    th.timer = setInterval(function () {
      th.getData();
    }, 3000);
    th.timerDate = setInterval(() => {
      th.curDate = new Date();
    }, 1000);
    let audio = th.$refs["audio-el"];
    audio.loop = false;
    audio.addEventListener(
      "ended",
      function () {
        th.curPlayCount++;
        if (th.curPlayCount == th.playCount) {
          th.curPlayCount = 0;
          th.onPlay();
        } else {
          setTimeout(() => {
            audio.play();
          }, 1000);
        }
      },
      false
    );
    audio.addEventListener("canplay", function () {});
    document.addEventListener("keyup", th.onKeyUp);
  },
  methods: {
    onGuoHao(obj) {
      let th = this;
      let j = {
        id: obj.id,
        callStaus: 0,
      };
      th.queueArr.splice(0, 1);
      th.$api.callOrdercallOrder(j).then((res) => {
        if (res.executed) {
        }
      });
    },
    move() {
    },
    getDept(list) {
      let th = this;
      th.deptList = list;
      th.form.deptId = list[0].deptId;
    },
    onKeyUp(e) {
      let th = this;
      th.isPlus = false;
    },
    getData() {
      let th = this;
      th.showItem = false;
      let j = {
        dateDay: th.$utils.FormatTime("yyyy-MM-dd", new Date().getTime()),
        deptId: th.form.deptId,
      };
      Object.assign(j, th.pager);
      th.$api.getCallOrderListByRoom(j).then((res) => {
        if (res.executed) {
          th.tableList = res.dataBody.list;
          th.pager.total = res.dataBody.total;
          th.showItem = true;
          th.compareData();
          th.addCallQueue();
          if (!th.isPlay) th.onPlay();
        }
      });
    },
    compareData() {
      let th = this;
      for (let i = th.queueArr.length - 1; i >= 0; i--) {
        if (i != 0) {
          th.queueArr.splice(i, 1);
        }
      }
    },
    onPlay() {
      let th = this;
      if (th.queueArr.length == 0) {
        th.isPlay = false;
        return;
      }
      th.isPlay = true;
      let data = th.queueArr[0];
      let str = `请,${data.sourceCode},${data.patientName}到${data.deptName},${data.roomName}就诊`;
      th.paintName = data.patientName;
      th.paintId = data.id;
      th.roomName = data.roomName;
      th.sourceCode = data.sourceCode;
      th.roomId = data.roomId;
      let audio = th.$refs["audio-el"];
      let strs = `http://39.106.59.18:8060/aliApi/aliApiCreateMusicByText?voice=siyue&speechRate=-400&volume=100&text=${str}`;
      audio.src = strs;
      th.onGuoHao(data);
    },
    addCallQueue() {
      let th = this;
      for (let i = 0; i < th.tableList.length; i++) {
        for (let j = 0; j < th.tableList[i].scheduleSourcesIng.length; j++) {
          let d = th.tableList[i].scheduleSourcesIng[j];
          if (d.callStatus == 0) continue;
          let data = th.queueArr.find((qd) => {
            return qd.id == d.id;
          });
          //加入队列
          if (data) {
          } else {
            th.queueArr.push(d);
          }
        }
      }
    },
    changeShow(item) {
      this.listShow = item;
    },
  },
  beforeDestroy() {
    let th = this;
    document.removeEventListener("keyup", th.onKeyUp);
    clearInterval(th.timer);
    clearInterval(th.timerDate);
  },
  components: {
    deptSearch: () => import("@/pages/_com/deptSearch.vue"),
    wait: () => import("./_animation/wait.vue"),
    over: () => import("./_animation/over.vue"),
  },
};
</script>
<style lang="scss" scoped>
.active-room_name {
  color: #77b741;
}
.schedule-name_box {
  width: 35% !important;
  overflow: hidden;
}

.active_name {
  background-color: #77b741;
  width: 80%;
  line-height: 70px;
  border-radius: 30px;
  color: #fff !important;
  font-size: 20px;
}
.tag_patientName {
  display: inline-block;
  font-size: 42px;
  margin-left: 10px;
  color: #77b741;
}
.puls-screen {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-color: white;
  top: 0;
  left: 0;
  font-size: 25px;
  display: flex;
  flex-direction: column;
  .register_box {
    display: inline-block;
    width: 100%;
    // margin: 40px 10% 0px 10%;
    // border: 2px solid #ddd;
    // border-radius: 30px;
    border-top: 6px solid #f2f2f2;
    // margin-top:40px;
    .register_title_box {
      margin-top: 40px;
      // margin: 40px 5% 0px 10%;
      text-align: center;
      font-family: "方正兰亭粗黑简体";
      font-size: 48px;
      span {
        width: 300px;
        display: inline-block;
        text-align: center;
        color: #fae884;
      }
    }
  }
  .full-screen-content {
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
    .bf_img_logo {
      width: 250px;
      height: 46px;
      margin-left: 20px;
    }
    .bf_bg_box {
      background: url("/img/bf_bg.png") no-repeat;
      background-size: 100% 100%;
      height: 224px;
      width: 562px;
    }
    .bftop-head {
      height: 190px;
      // padding: 20px 0px;
      position: relative;
      overflow: hidden;
      // background: linear-gradient(#2f93b4, #1f8c91); /* 标准的语法 */
      // color: white;
      display: flex;
      > div:nth-child(1) {
        // display: inline-block;
        flex: 1;
        // padding: 20px;
      }
      > div:nth-child(2) {
        // float: right;
        // flex: 1;
        // width: 220px;
        // height: 100%;
        max-width: 540px;
        overflow: hidden;
        text-align: center;
      }
      > div:nth-child(3) {
        flex: 1;
        // padding: 20px;
        text-align: right;
        padding-right: 10px;
        font-size: 12px;
      }
      .menzhen_time {
        display: inline-block;
        width: 120px;
        font-size: 42px;
        color: #3f3a3a;
        margin-top: 66px;
      }
      .menzhen_date {
        display: inline-block;
        width: 160px;
        margin-top: 50px;
        position: relative;
        font-size: 18px;
        text-align: left;
        margin-right: 30px;
        font-family: "方正兰亭粗黑简体";
        margin-left: 20px;
        .date {
          display: inline-block;
          width: 100%;
        }
      }
      .menzhen_date:after {
        content: "";
        right: 0px;
        top: -7px;
        position: absolute;
        width: 1px;
        height: 55px;
        background-color: #3f3a3a;
      }
      .middle-title {
        // padding: 10px 0;
        margin: 0 auto;
        text-align: center;
        font-family: "方正兰亭粗黑简体";
        line-height: 170px;
        color: #5c813d;
        height: 100%;
        // width: 70%;
        // background: linear-gradient(#1ab296, #1aa4b0); /* 标准的语法 */
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        font-size: 80px;
        // text-shadow: 2px 2px 0 #2e93b3;
        // box-shadow: 0px 5px 15px -5 #2e93b3;
      }
    }
    .table-full-screen {
      width: 100%;
      border-spacing: 0;
      border-collapse: collapse;
      text-align: center;
      > thead {
        // background-color: #218d95;
        // color: #57bec5;
        // height: 80px;
        > tr {
          // height: 100%;
          // float: left;
          // width: 100%;
          // font-size: 18px;
          th {
            position: relative;
            height: 100px;
            padding: 20px 0px;
            float: left;
            // display: inline-block;
            width: 25%;
            font-family: "兰亭黑简";
            font-size: 48px;
            line-height: 80px;
          }
        }
      }
      > tbody {
        // float: left;
        // width: 100%;
        margin-top: 20px;
        > tr {
          // height: 60px;
          // float: left;
          // width: 100%;
          // margin: 10px 0px;
          border-bottom: 1px solid #ddd;
          // font-size: 25px;
          // height: 120px;
          // line-height: 120px;
          td {
            // display:block;
            // display: inline-block;
            float: left;
            width: 25%;
            // height: 80px;
            // padding: 20px 0px;
            height: 120px;
            line-height: 120px;
            overflow: hidden;
            font-family: "方正兰亭粗黑简体";
            font-size: 46px;
          }
        }
      }
      .register_active {
        background-color: #5c813d;
        color: #fff;
        border: 0px;
        border-bottom: 0px;
        border-radius: 20px;
      }
      .ph:after {
        content: "";
        background-color: #77b741;
      }
      .xm:after {
        content: "";
        background-color: #f7b62d;
      }
      .zs:after {
        content: "";
        background-color: #666;
      }
      .gh:after {
        content: "";
        background-color: #ff5757;
      }
    }
    .table-full-screen thead th:after {
      content: "";
      height: 4px;
      width: 90%;
      position: absolute;
      background-color: #000;
      bottom: 0px;
      left: 5%;
    }

    //  border-bottom:5px solid #000;
  }
  .gh_active_name {
    color: #ff5757;
  }
  .footer-box {
    position: absolute;
    bottom: 20px;
    right: 50px;
    // flex-shrink: 0;
    // height: 60px;
    // text-align: right;
    // background-color: #2e93b3;
    // text-align: center;
    // line-height: 60px;
    // padding-right: 40px;
    // color: white;
  }
  .register_table {
    width: 100%;
    border-bottom: 0px;
    margin: 0px 0 0px 0;
  }
}
</style>